<template>
  <div class="aboutPage">
    <el-row>
      <el-col :span="2">
        <el-button  type="primary" @click="fatchData">刷新</el-button>
      </el-col>
      <el-col :span="22"></el-col>
    </el-row>
    <el-table :border="true" :data="tableData" style="width: 100%;margin-top: 10px;" v-loading="isloading" :row-class-name="tableRowClassName">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>

import service from '@/services/service.js';
export default {
  name:'aboutPage',
  data() {
    return {
      isloading: false,
      tableData: []
    }
  },
  created(){
    this.fetchData();
  },
  methods:{
    async fetchData() {
      try {
        this.isloading= true;
        const response = await service.get('/posts');
        // 处理响应数据
        console.log(response);
        this.isloading= false;
        this.tableData= response;
      } catch (error) {
        // 处理错误
        console.error(error);
      }
    },
    fatchData(){
      this.fetchData();
    },
    tableRowClassName({rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }
  }
}
</script>

<style scoped>
.aboutPage{
  width: 100%;
}
.aboutPage >>> .el-table tr.warning-row {
    background: oldlace;
  }

  .aboutPage >>> .el-table tr.success-row {
  background: #f0f9eb;
}
</style>